<template>
  <view class="home-page">
    <!-- 头部导航栏 -->
    <view class="top-header">
      <view class="header-left">
        <image
          class="logo"
          src="/static/login/logo.png"
          mode="aspectFit"
        ></image>
        <text class="app-title">每日查房</text>
      </view>

      <view class="header-right">
        <view class="user-section" @click="toggleUserMenu">
          <image
            class="user-avatar"
            src="/static/login/logo.png"
            mode="aspectFit"
          ></image>
          <text class="username">{{ username }}</text>
          <text class="arrow">▼</text>

          <!-- 用户下拉菜单 -->
          <view v-if="showMenu" class="user-menu">
            <view class="menu-option" @click.stop="logout">
              <text>退出登录</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 主内容区 -->
    <view class="main-content">
      <view class="page-title">
        <text>今日查房班次</text>
      </view>

      <!-- 查房班次列表 -->
      <view class="shift-list">
        <view
          class="shift-item"
          v-for="(item, index) in shiftList"
          :key="index"
        >
          <view class="time-badge">
            <text class="time-text">{{ item.time }}</text>
          </view>

          <view class="shift-info">
            <view class="info-row">
              <text class="label">查房时间:</text>
              <text class="value">{{ item.dateTime }}</text>
            </view>
            <view class="info-row">
              <text class="label">查房药师:</text>
              <text class="value">{{ item.pharmacist }}</text>
            </view>
          </view>

          <view class="shift-right">
            <view class="person-count">
              <image
                class="icon-location"
                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B35'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"
                mode="aspectFit"
              ></image>
              <text class="count"
                >{{ item.checkedCount }}/{{ item.totalCount }}</text
              >
            </view>
            <text class="count-label">已查人数</text>
            <view
              class="action-btn"
              :class="
                item.checkedCount === item.totalCount
                  ? 'view'
                  : item.checkedCount > 0
                  ? 'continue'
                  : 'view'
              "
              @click="handleAction(item)"
            >
              <text>{{
                item.checkedCount === item.totalCount
                  ? "查看"
                  : item.checkedCount > 0
                  ? "继续查房"
                  : "开始查房"
              }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      showMenu: false,
      // 查房班次列表数据
      shiftList: [
        {
          time: "08:00",
          dateTime: "2025-10-17  08:00-11:00",
          pharmacist: "张山、李云瑞",
          checkedCount: 30,
          totalCount: 80,
          status: "continue", // 继续查房：有已查房数据（30人），有待查房数据（50人）
        },
        {
          time: "13:00",
          dateTime: "2025-10-17  13:00-16:00",
          pharmacist: "张山、王一涵",
          checkedCount: 0,
          totalCount: 90,
          status: "view", // 开始查房：已查房数据为空（0人），全部是待查房数据（90人）
        },
        {
          time: "16:00",
          dateTime: "2025-10-17  16:00-19:00",
          pharmacist: "张山、陈梦可",
          checkedCount: 85,
          totalCount: 85,
          status: "view", // 查看：全部查完（85人），没有待查房数据，只有已查房数据
        },
      ],
    };
  },
  onLoad() {
    // 检查登录状态
    const isLogin = uni.getStorageSync("isLogin");
    const username = uni.getStorageSync("username");

    if (!isLogin) {
      // 未登录，跳转到登录页
      uni.reLaunch({
        url: "/pages/login/index",
      });
      return;
    }

    this.username = username;
  },
  methods: {
    toggleUserMenu() {
      this.showMenu = !this.showMenu;
    },
    logout() {
      this.showMenu = false;
      uni.showModal({
        title: "提示",
        content: "确定要退出登录吗？",
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync("isLogin");
            uni.removeStorageSync("username");
            uni.reLaunch({
              url: "/pages/login/index",
            });
          }
        },
      });
    },
    handleAction(item) {
      // 判断状态：
      // - 如果已查人数 = 总人数，状态为 "checked"（查看）
      // - 如果已查人数 > 0，状态为 "pending"（继续查房）
      // - 如果已查人数 = 0，状态为 "empty"（开始查房）
      let status;
      if (item.checkedCount === item.totalCount) {
        status = "checked"; // 全部查完，查看模式
      } else if (item.checkedCount > 0) {
        status = "pending"; // 有已查房数据，继续查房
      } else {
        status = "empty"; // 无已查房数据，开始查房
      }

      const shiftData = encodeURIComponent(
        JSON.stringify({
          time: item.time,
          dateTime: item.dateTime,
          pharmacist: item.pharmacist,
        })
      );

      uni.navigateTo({
        url: `/pages/shift/detail?status=${status}&shiftData=${shiftData}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home-page {
  height: 100vh;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;

  // 顶部导航栏
  .top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    z-index: 999;

    .header-left {
      display: flex;
      align-items: center;

      .logo {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }

      .app-title {
        font-size: 36rpx;
        color: #ffffff;
        font-weight: bold;
      }
    }

    .header-right {
      position: relative;

      .user-section {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 40rpx;
        padding: 10rpx 24rpx;
        position: relative;

        .user-avatar {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          margin-right: 16rpx;
          background: #ffffff;
        }

        .username {
          font-size: 28rpx;
          color: #ffffff;
          margin-right: 12rpx;
        }

        .arrow {
          font-size: 20rpx;
          color: rgba(255, 255, 255, 0.8);
        }

        &:active {
          opacity: 0.8;
        }

        .user-menu {
          position: absolute;
          top: 90rpx;
          right: 0;
          background: #ffffff;
          border-radius: 12rpx;
          box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
          min-width: 200rpx;
          overflow: hidden;

          .menu-option {
            padding: 24rpx 32rpx;

            text {
              font-size: 28rpx;
              color: #333333;
            }

            &:active {
              background: #f5f7fa;
            }
          }
        }
      }
    }
  }

  // 主内容区
  .main-content {
    margin-top: 120rpx;
    padding: 0 0 60rpx 0;
    flex: 1;
    overflow-y: auto;

    .page-title {
      padding: 28rpx;

      text {
        font-size: 34rpx;
        color: #333333;
        font-weight: bold;
      }
    }

    .shift-list {
      padding: 0 28rpx;

      .shift-item {
        background: #ffffff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;

        .time-badge {
          width: 120rpx;
          height: 120rpx;
          background: linear-gradient(135deg, #5dccfc 0%, #4a9ff5 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 30rpx;
          flex-shrink: 0;

          .time-text {
            font-size: 32rpx;
            color: #ffffff;
            font-weight: bold;
          }
        }

        .shift-info {
          flex: 1;

          .info-row {
            margin-bottom: 12rpx;

            &:last-child {
              margin-bottom: 0;
            }

            .label {
              font-size: 26rpx;
              color: #666666;
            }

            .value {
              font-size: 26rpx;
              color: #333333;
              margin-left: 8rpx;
            }
          }
        }

        .shift-right {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 20rpx;

          .person-count {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;

            .icon-location {
              width: 32rpx;
              height: 32rpx;
              margin-right: 8rpx;
            }

            .count {
              font-size: 32rpx;
              color: #333333;
              font-weight: bold;
            }
          }

          .count-label {
            font-size: 24rpx;
            color: #999999;
            margin-bottom: 16rpx;
          }

          .action-btn {
            padding: 12rpx 32rpx;
            border-radius: 40rpx;

            text {
              font-size: 26rpx;
              color: #ffffff;
            }

            &.continue {
              background: linear-gradient(to right, #10b981, #059669);
            }

            &.view {
              background: linear-gradient(to right, #4a9ff5, #5dccfc);
            }

            &:active {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}
</style>
